<template>
<div class="topic">
    <div class="topic_box" v-for="item in topicData" :key="item.id">
        <img :src="item.scene_pic_url" alt />
        <h3>{{item.title}}</h3>
        <h4>{{item.subtitle}}</h4>
        <p>{{item.price_info | RMBfilter}}</p>
    </div>
    <!-- 分页 -->
    <van-pagination class="pagination" v-model="page" :page-count="2" mode="simple" @change="ChangePage"/>
</div>
</template>

<script>
export default {
    data() {
        return {
            color: "red",
            page: 1,
            currentPage: 1,
            size: 10,
            topicData: [],
        }
    },
    created() {
        this.TopicListData();
    },
    methods: {
        ChangePage() {
            this.TopicListData();
            // 回到最上边
            window.scroll(0, 0);
        },
        async TopicListData() {
            const res = await this.$http.get('/topic/list', {
                query: {
                    page: this.page,
                    size: this.size
                }
            })
            if (res.data.errno == 0) {
                this.topicData = res.data.data.data;
                // console.log(this.topicData)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.topic {
    text-align-last: center;
    padding-bottom: .5rem;
    .topic_box {
        background-color: #fff;
        padding-bottom: 10px;
        margin-bottom: 20px;

        img {
            width: 100%;
        }

        h3 {
            font-size: 18px;
            margin: 10px 0;
        }

        h4 {
            font-size: 16px;
            margin: 20px 0;
        }

        p {
            color: #9b0000;
            margin-bottom: 10px;
        }
    }
}

</style>
